<template>
  <div class="dashboard-container">
    <div class="home-conetnt">
      <div
        class="home-list"
        v-for="item in content"
    
        @click="skip(item.url)"
        v-show="item.is_show"
      >
        <div class="home-list-icon">
          <img class="home-list-img" :src="item.icon" alt="" />
          <div style="margintop: 20px; font-size: 16px">{{ item.text }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Navigation from "./navigation.js";
import store from "../../store";
export default {
  name: "home",
  data() {
    return {
      content: [],
    };
  },
  inject: ["reload"],
  computed: {
    ...mapGetters(["name"]),
  },
  watch: {
    $router(e, q) {
      this.reload();
    },
  },
  mounted() {
    let nav = new Navigation();
    let content = nav.getNav(this.$ROLE_MAPS.ROLE_MAPS);

    if (!localStorage.getItem("roleConfig")) {
      localStorage.clear();
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    }
    let roleConfig = JSON.parse(localStorage.getItem("roleConfig"));
    this.content = content.map((v) => {
      let is_show = false;
      roleConfig.forEach((v2) => {
        if (v2.menu_map_key == v.ROLE_MAPS) {
          is_show = true;
        }
      });
      return {
        ...v,
        is_show: is_show,
      };
    });
    //  console.log("this.content",this.content)
  },

  beforeMount() {
    // console.log("store77777777",store)
    store.dispatch("tagsView/addView", this.$route);
  },
  methods: {
    skip(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.dashboard {
  &-container {
    // margin: 30px;
    padding: 20px;
    box-sizing: border-box;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
    color: #409eff;
  }
}
.el-table .el-table__cell {
  padding: 0px 0px !important;
}
</style>
